<template>
  <!-- <div class>
    <automatePageTable ref="routeTable" :config="pageTableConfig"></automatePageTable>
  </div> -->
  <div class="innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption v-if="!useTableSearchBar">
      <Form :model="formSearch" ref="tenantStatisticsFormSearch" slot="adaption-bar" class="ivu-form-no-margin-bottom" inline>
        <template>
          <Form-item prop="path" :label="$t('module.routeManage.path')">
            <Input
              type="text"
              v-model.trim="formSearch.path"
              placeholder="请输入路由路径"
              :maxlength="128"
              @on-enter="search"
            />
          </Form-item>
          <Form-item prop="url" :label="$t('module.routeManage.url')">
            <Input
              type="text"
              v-model.trim="formSearch.url"
              placeholder="请输入url代理"
              :maxlength="128"
              @on-enter="search"
            />
          </Form-item>
          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="search" />
            <RPButton optType="reset" @click="formReset" />
          </Form-item>
        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="routeTable" :config="tableConfig">
      <div slot="table-bar" v-if="useTableSearchBar">
        <RPButton optType="create" @click="add" />
        <RPButton text="应用" @click="apply" />
      </div>
      <Form :model="formSearch"
        ref="tenantStatisticsFormSearch" 
        v-if="useTableSearchBar"
        slot="table-search-bar"
        class="ivu-form-no-margin-bottom" inline>
        <template>
          <!-- 租户编码 -->
          <Form-item prop="path">
            <Input
              type="text"
              v-model.trim="formSearch.path"
              placeholder="请输入路由路径"
              :maxlength="128"
              @on-enter="search"
              @on-blur="search"
            />
          </Form-item>
          <Form-item prop="url">
            <Input
              type="text"
              v-model.trim="formSearch.url"
              placeholder="请输入url代理"
              :maxlength="128"
              @on-enter="search"
              @on-blur="search"
            />
          </Form-item>
        </template>
      </Form>
    </InnerPageTable>
  </div>
</template>
<script>
import routeEdit from "./routeEdit.vue";
import { getValueSetsByConfig } from "./index.js";
import locales from "./locales.js";
const COLUMN_WIDTH = window.RPConfig.COLUMN_WIDTH
export default {
  name: "PageTable",
  mixins: [locales],
  data() {
    let tableBtnData = [
      {
        name: "新建", //按钮名称
        icon: "md-add", //按钮图标
        type: "primary", //按钮主题 primary、dashed、text、info、success、warning、error
        //shape:'circle',//圆角 circle或不设置
        disabled: false, //不可用状态
        handle: this.add //回调事件
      },
      {
        name: "应用", //按钮名称
        icon: "md-paper-plane", //按钮图标
        type: "success", //按钮主题 primary、dashed、text、info、success、warning、error
        //shape:'circle',//圆角 circle或不设置
        disabled: false, //不可用状态
        handle: this.apply //回调事件
      }
    ];
    return {
      formSearch: {
        tenantCode: $store.state["ripples-components"].userInfo.tenantCode,
        path: "",
        url: ""
      },
      valueSet: {},
      tableConfig : {
        loadDataFn: this.getRouteList,
        columnsFn: this.getTableColumns
      }
    };
  },
  mounted() {
    this.search();
    this.getValueSet();
  },
  methods: {
    search(page = 1) {
      this.$refs["routeTable"].load(Object.assign({}, this.formSearch), page);
    },
    getRouteList ({ responseProcess, param }) {
      $http.post(`apis/route/getRoutePage`, param).then(res => {
        responseProcess(res.data);
      });
    },
    getTableColumns () {
      return [
        {
          key: "path",
          title: this.$t("module.routeManage.path"),
          minWidth: 150,
        },
        {
          key: "serviceId",
          title: this.$t("module.routeManage.serviceId"),
          minWidth: 150,
        },
        {
          key: "groupName",
          title: this.$t("module.routeManage.groupname"),
          minWidth: 100,
        },
        {
          key: "url",
          title: this.$t("module.routeManage.url"),
          minWidth: 120,
        },
        {
          key: "tenantCode",
          title: this.$t("module.routeManage.tenantCode"),
          minWidth: 120,
        },
        {
          key: "stripPrefix",
          title: this.$t("module.routeManage.stripPrefix"),
          align: "center",
          minWidth: COLUMN_WIDTH.COLUMN_WIDTH_6_WORDS,
          maxWidth: COLUMN_WIDTH.COLUMN_WIDTH_6_WORDS + COLUMN_WIDTH.MAX_WIDTH_MORE,

        },
        {
          key: "retryable",
          title: this.$t("module.routeManage.retryable"),
          align: "center",
          minWidth: COLUMN_WIDTH.COLUMN_WIDTH_4_WORDS,
          maxWidth: COLUMN_WIDTH.COLUMN_WIDTH_4_WORDS + COLUMN_WIDTH.MAX_WIDTH_MORE,
          render: (h, params) => {
            //自定义渲染
            return h("div", params.row.retryable == 1 ? "是" : "否");
          }
        },
        {
          key: "enabled",
          title: this.$t("module.routeManage.enabled"),
          align: "center",
          minWidth: COLUMN_WIDTH.COLUMN_WIDTH_4_WORDS,
          maxWidth: COLUMN_WIDTH.COLUMN_WIDTH_4_WORDS + COLUMN_WIDTH.MAX_WIDTH_MORE,
          render: (h, params) => {
            //自定义渲染
            return h("div", params.row.enabled == 1 ? "是" : "否");
          }
        },
        {
          title: this.$t("common.operating"),
          align: "center",
          width: 140,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "md-create",
                    text: this.$t("common.edit"),
                    handle: () => {
                      this.edit(params.row);
                    }
                  },
                  {
                    type: "icon",
                    icon: "ios-trash",
                    text: this.$t("common.delete"),
                    handle: () => {
                      this.delete(params.row);
                    }
                  }
                ]
              }
            });
          }
        }
      ];
    },
    getValueSet() {
      const config = [
        {
          code: "GATEWAY_TYPE",
          attr: "gateway_type",
          targetObj: this.valueSet
        },
        {
          code: "GATEWAY_ROUTE_TYPE",
          attr: "gateway_route_type",
          targetObj: this.valueSet
        },
        {
          code: "GATEWAY_RECEIVE_TYPE",
          attr: "gateway_receive_type",
          targetObj: this.valueSet
        },
        {
          code: "GATEWAY_SEND_TYPE",
          attr: "gateway_send_type",
          targetObj: this.valueSet
        }
      ];
      Promise.all([getValueSetsByConfig(config)]).then(() => {
        this.$refs["routeTable"].load();
      });
    },
    getValueSetName(data, value) {
      if (data && value) {
        let result = data.find(item => item.vsiKey === value);
        if (result && result.vsiValue) {
          return result.vsiValue;
        }
      }
    },
    apply() {
      this.$store.dispatch("Apply").then(data => {
        this.$message.success({
          content: "刷新成功！",
          duration: 2
        });
      });
    },
    add() {
      new this.$pageModal(
        routeEdit,
        {
          props: {
            valueSet: this.valueSet,
            isAdd: true
          }
        },
        data => {
          this.$refs["routeTable"].load();
        }
      );
    },
    edit(row) {
      new this.$pageModal(
        routeEdit,
        {
          props: {
            row: row,
            valueSet: this.valueSet,
            isAdd: false
          }
        },
        data => {
          this.$refs["routeTable"].load();
        }
      );
    },
    delete(row) {
      new $confirm("确认删除吗？", this).then(() => {
        this.$store
          .dispatch("DeleteRouteManage", {
            id: row.id
          })
          .then(response => {
            if (response) {
              this.$message.success({
                content: this.$t("common.deleteSuccess"),
                duration: 3
              });
              this.$refs["routeTable"].load();
            } else {
              this.$message.error({
                content: response.message,
                duration: 3
              });
            }
          });
      });
    }
  }
};
</script>
<style lang="less">
</style>
